<template>
  <div class="upFile">
    <el-dialog
      :modal="false"
      title="上传"
      :visible.sync="dialogVisible"
      width="400px">
      <el-upload
        v-if="dialogVisible"
        ref="upload"
        class="upload-demo"
        :limit="1"
        drag
        action="localhost:8080"
        :auto-upload="true"
        :before-upload="beforeAvatarUpload">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传json文件，且不超过10Mb</div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'upFile',
    props: [''],
    components: {},
    data() {
      return {
        dialogVisible: false,
        nodeId: null
      }
    },
    computed: {},
    methods: {
      beforeAvatarUpload(file) {
        console.log(file)
        const isJPG = file.type === 'application/json';
        const isLt2M = file.size / 1024 / 1024 < 10;

        if (!isJPG) {
          this.$message.error('上传文件只能是 JSON 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过 10MB!');
        }
        let url = URL.createObjectURL(file);
        axios.get(url).then(res=>{
          if(res.status === 200 && Array.isArray(res.data)){
            this.$emit('success',res.data)
            this.dialogVisible = false
          }else{
            this.$message('上传失败')
          }
        })
        return false
      }
    },
    mounted() {
    },
    created() {
    },
    watch: {}
  }
</script>

<style scoped lang="scss">
  .upFile {
  }
</style>

